<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>基础知识</title>
	<!-- <link href="./static/css/animate.css" rel="stylesheet"> -->
	<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.2.3/animate.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="./static/css/public.css" />
	<style>
		#location{
			cursor: pointer;
			color:#3eaf7c;
		}
	</style>
</head>
<body>
	<!--右边内容-->
	<div id="app" class="main animated fadeInRight">
		<div class="shadow">
			<div>
				<h3>项目首页</h3>
				<p>本项目主要是记录前端除React、Node、Linux的知识，主要包括Html、Css、Js和Ui部分。
				部分讲到了ES6的内容，但是ES6的主要内容是放到了
				<span id="location" @click="locationTo">Vue笔记</span>来总结的。
				项目的框架用到了H+，做了修改，去除了一些功能,添加了vue2.x和vue3.x原生的写法。
				下面使用了百度的Echart树状图显示</p>
			</div>
			<div id="main" style="width: 100%;min-height:700px;border: 1px solid #ccc;"></div>
		</div>
	</div>
	<!--页面加载进度条-->
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.4/jquery.js"></script>
	<!-- <script src="./static/js/plugins/pace/pace.min.js"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/pace/0.5.0/pace.min.js"></script>
	<script src="./static/js/echarts.common.min.js" type="text/javascript" charset="utf-8"></script>
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.3.0-rc.2/echarts.common.js"></script> -->
	<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.min.js"></script> -->
	<!-- <script src="./static/js/vue.js" type="text/javascript" charset="utf-8"></script> -->
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js"></script>
	<script src="./static/js/config.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var app = new Vue({
			el: "#app",
			data: function() {
				return {
					myChart:null
				}
			},
			mounted() {
				let that=this
				that.myChart = echarts.init(document.getElementById('main'));
				that.myChart.showLoading();
				$.get('./static/json/list.json', function (data) {
				    that.myChart.hideLoading();
				    echarts.util.each(data.children, function (datum, index) {
				        index % 2 === 0 && (datum.collapsed = true);
				    });
				
				    that.myChart.setOption(option = {
				        tooltip: {
				            trigger: 'item',
				            triggerOn: 'mousemove'
				        },
				        series: [
				            {
				                type: 'tree',
				
				                data: [data],
				
				                top: '1%',
				                left: '7%',
				                bottom: '1%',
				                right: '20%',
								roam:true,
				                symbolSize: 7,
				
				                label: {
				                    position: 'left',
				                    verticalAlign: 'middle',
				                    align: 'right',
				                    fontSize: 12
				                },
				
				                leaves: {
				                    label: {
				                        position: 'right',
				                        verticalAlign: 'middle',
				                        align: 'left'
				                    }
				                },
				
				                expandAndCollapse: true,
								 initialTreeDepth:2,
				                animationDuration: 550,
				                animationDurationUpdate: 750
				            }
				        ]
				    });
				});
				window.setInterval(()=>{
					that.myChart.resize()
				},1500)
			},
			methods:{
				locationTo(){
					// location.href = webUrl
					// window.open(webUrl,"_blank","width=1300, height=1200")
					window.open(webUrl)
					// window.open(webUrl,"_blank")
				}
			}
		})
	</script>
</body>

</html>